<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本-pro
    </title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            background-color: rgba(225, 225, 225, 0.4);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(225, 225, 225, 0.6);
            width: 530px;
            height: 250px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 4px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .box1 {
            background-color: rgba(225, 225, 225, 0.3);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: 1px solid rgba(225, 225, 225, 0.5);
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            width: 500px;
            margin-bottom: 10px;
            border-radius: 4px;
            padding: 0 15px;
        }

        .input {
            background-color: aliceblue;
            width: 120px;
            padding: 5px;
        }

        .btn {
            background-color: aliceblue;
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .box2 {
            width: 500px;
            height: 160px;
            overflow-y: auto;
            padding: 5px;
            background-color: rgba(225, 225, 225, 0.2);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(225, 225, 225, 0.3);
            border-radius: 0 0 4px 4px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box1">
            <input type="text" class="input" id="noteInput" list="historyList">
            <datalist id="historyList"></datalist>
            <button class="btn" onclick="Add()">添加</button>
            <button class="btn" onclick="Search()">搜索</button>
            <button class="btn" onclick="Clear()">清空</button>
            <button class="btn" onclick="Reverse()">倒序</button>
            <button class="btn" onclick="changeBg()">更换背景</button>
        </div>
        <div class="box2" id="notesContainer"></div>
    </div>
</body>

<script>
    let count = 1;
    const backgrounds = ['w1.png', 'w2.png', 'w3.png', 'w4.png', 'w5.png'];
    let bgIndex = 0;

    let history = JSON.parse(localStorage.getItem('noteHistory')) || [];
    updateDatalist();

    function Add() {
        const input = document.getElementById('noteInput');
        const text = input.value.trim();

        if (text) {
            // 添加记录
            const note = document.createElement('div');
            note.textContent = `${count++}. ${text}`;
            document.getElementById('notesContainer').appendChild(note);

            // 保存历史
            if (!history.includes(text)) {
                history.push(text);
                localStorage.setItem('noteHistory', JSON.stringify(history));
                updateDatalist();
            }

            input.value = '';
        }
    }

    //更新历史记录
    function updateDatalist() {
        const datalist = document.getElementById('historyList');
        datalist.innerHTML = history.map(item =>
            `<option value="${item}">`).join('');
    }

    //清空所有
    function Clear() {
        count = 1;
        history = [];
        localStorage.removeItem('noteHistory');
        document.getElementById('notesContainer').innerHTML = '';
        updateDatalist();
    }

    //倒序
    function Reverse() {
        const container = document.getElementById('notesContainer');
        const notes = Array.from(container.children);
        container.innerHTML = '';
        notes.reverse().forEach(note => container.appendChild(note));
    }

    //初始化
    document.addEventListener('DOMContentLoaded', function () {
        document.body.style.backgroundImage = 'url(w1.png)'; // 初始背景
        document.body.style.backgroundSize = 'cover';       // 背景覆盖全屏
        document.body.style.backgroundRepeat = 'no-repeat'; // 不重复
        document.body.style.backgroundPosition = 'center';  // 居中显示
    })

    //更换背景
    function changeBg() {
        bgIndex = (bgIndex + 1) % backgrounds.length;
        document.body.style.backgroundImage = `url(${backgrounds[bgIndex]})`;
    }

    //搜索
    function Search() {
        const keyword = prompt('请输入搜索内容');
        if (keyword) {
            const notes = document.getElementById('notesContainer').children;
            Array.from(notes).forEach(note => {
                note.style.color = note.textContent.includes(keyword) ? 'red' : 'black';
            });
        }
    }
</script>

</html>